<template>
  <el-dialog
    :title="editPd ? $t('message.xgyd') : $t('message.ydxx')"
    :visible.sync="showReserve"
    :close-on-click-modal="modalDialog"
    :close-on-press-escape="modalDialog"
    width="800px"
    class="dialog-reserve"
  >
    <el-table
      :data="reserveForm"
      element-loading-text="Loading"
      border
      fit
      :header-row-class-name="'table-header'"
      class="doumee-element-table"
    >
      <el-table-column :label="$t('message.xh')" type="index" align="center" :width="$i18n.locale === 'ZH'? 50 : 120" />
      <el-table-column align="center" :label="$t('message.cdname')" show-overflow-tooltip>
        <template slot-scope="scope">
          {{ editPd ? scope.row.siteModelName : scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column align="center" :label="$t('message.time')" show-overflow-tooltip>
        <template slot-scope="scope">
          {{ scope.row.beginTime + " - " + scope.row.endTime }}
        </template>
      </el-table-column>
      <el-table-column align="center" :label="$t('message.feiyon')" prop="price" width="100" show-overflow-tooltip>
        <template slot-scope="scope">
          {{ scope.row.price }} {{ $t('message.yuan') }}
        </template>
      </el-table-column>
    </el-table>
    <div class="zbt"><span class="secondColor">*</span>{{ $t('message.khxx') }}：</div>
    <div class="memberFlex">
      <MemberSearch ref="memberSearch" type="20" class="search" @clear="memberClear" @select="memberSelect" />
      <el-button class="ml10" :type="userType == 0?'':'primary'" @click="skBtn">{{ $t('message.sk') }}</el-button>
    </div>
    <div v-if="userType == 0 && members && members.nickName" class="member">
      <div>{{ $t('message.name') }}：{{ members.nickName }}</div>
      <div>{{ $t('message.sjh') }}：{{ members.phone }}</div>
      <div>{{ $t('message.hydj') }}：{{ members.cardName }}</div>
      <div>{{ $t('message.czye') }}：<span>{{ members.rechargeMoney|| members.remainingMoney || 0 }}</span></div>
      <div>{{ $t('message.zsye') }}：<span>{{ members.giveMoney || members.remainingGiveMoney || 0 }}</span></div>
    </div>
    <div v-if="userType == 1" class="skCnt">
      <el-input v-model="userName" :placeholder="$t('message.qsrskxm')" :maxlength="50" style="width: 39%;margin-right: 2%" />
      <el-input v-model="userPhone" :maxlength="11" :placeholder="$t('message.qsrsksjh')" style="width: 59%; " />
    </div>
    <div class="bzbt">{{ $t('message.bz') }}：</div>
    <el-input v-model="remarks" type="textarea" :autosize="{ minRows: 2, maxRows: 10 }" :placeholder="$t('message.qsrbz')" />
    <div slot="footer" class="dialog-footer">
      <div class="reserve-money">{{ $t('message.ddje') }}：<b>{{ zprice }}</b>{{ $t('message.yuan') }}</div>
      <el-button @click="showReserve = false">{{ $t('message.qx') }}</el-button>
      <el-button v-preventReClick type="primary" @click="clickReserveForm(0)">{{ editPd?$t('message.qr'): $t('message.ydcd') }}</el-button>
      <el-button v-if="status === '0'" v-preventReClick type="primary" @click="clickReserveForm(1)">{{ $t('message.zjfk') }}</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { configList, updateSiteReserve, createReserve, memberInfo, siteReserve } from '@/api'
import MemberSearch from '@/components/MemberSearch'
import store from '@/store'
export default {
  components: {
    MemberSearch
  },
  data() {
    return {
      modalDialog: store.getters.dialog,
      editPd: false,
      showReserve: false,
      reserveForm: [],
      zprice: '',
      typeList: [this.$t('message.hydji'), this.$t('message.skdji')],
      userType: 0,
      cardNum: '',
      status: '',
      members: {},
      userName: '',
      userPhone: '',
      remarks: '',
      siteIds: [],
      detail: {}
    }
  },
  methods: {
    open(detail, status, edit) {
      this.showReserve = true
      this.detail = detail
      this.status = status
      this.reserveForm = detail.reserveForm
      this.zprice = detail.zprice
      this.siteIds = detail.siteIds
      if (edit) {
        if (status === '1' || status === '2') {
          this.editPd = true
          this.userType = Number(detail.userType)
          this.remarks = detail.remarks
          if (detail.userType === '0' || detail.userType === 0) {
            this.userPhone = ''
            this.userName = ''
            memberInfo({
              param: {
                id: detail.memberId
              }
            }).then(res => {
              if (res.errorCode === '000000') {
                this.members = res.record
                this.cardNum = res.record.number
              }
            }).catch(err => {
              console.log(err)
            })
          } else {
            this.cardNum = ''
            this.members = {}
            this.userPhone = detail.userPhone
            this.userName = detail.userName
          }
        }
      } else {
        if (status === '0' || status === '9') {
          this.members = {}
          this.remarks = ''
          this.editPd = false
          this.userPhone = ''
          this.userName = ''
          this.cardNum = ''
          this.userType = 0
        }
      }
      this.$nextTick(() => {
        this.$refs.memberSearch.clearSearch()
      })
    },
    skBtn() {
      this.userType = 1
      this.members = {}
      this.$refs.memberSearch.clearSearch()
    },
    cList() {
      configList({ param: { type: '7', code: 'EPIDEMIC_PREVENTION_MODE' }})
        .then((res) => {
          if (res.errorCode !== '000000') return
          const valueList = res.recordList
          const item = valueList.find((item) => {
            return item.code === 'EPIDEMIC_PREVENTION_MODE'
          })
          if (item.value === '0') {
            this.typeList = [this.$t('message.hydji')]
            this.userType = 0
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    memberSelect(item) {
      this.members = item
      this.cardNum = item.number
      this.userType = 0
    },
    memberClear() {
      this.members = {}
      this.cardNum = ''
    },
    clickReserveForm(e) {
      if ((this.userType === 0 && !this.members) || (this.userType === 0 && !this.cardNum)) {
        this.$message.info(this.$t('message.qsr') + this.$t('message.hy1'))
        return
      }
      if (this.editPd) {
        updateSiteReserve({
          param: {
            memberId: this.members.id,
            reserveId: this.detail.id,
            remarks: this.remarks,
            siteIds: this.siteIds,
            type: e,
            userName: this.userName || this.$t('message.sk'),
            userPhone: this.userPhone,
            userType: this.userType
          }
        }).then(res => {
          if (res.errorCode === '000000') {
            this.showReserve = false
            this.members = ''
            this.userPhone = ''
            this.userName = ''
            this.remarks = ''
            this.$message.success(this.$t('message.xgydcg'))
            this.reserveForm = []
            this.siteIds = []
            this.$emit('success')
            if (e === 1) {
              this.$emit('paymentShow', this.details)
            } else {
              this.details = {}
              this.operation = false
            }
          }
        }).catch(err => {
          console.log(err)
        })
      } else {
        createReserve({
          param: {
            memberId: this.members.id,
            remarks: this.remarks,
            siteIds: this.siteIds,
            type: e,
            userName: this.userName || this.$t('message.sk'),
            userPhone: this.userPhone,
            userType: this.userType
          }
        }).then(res => {
          if (res.errorCode === '000000') {
            this.$message.success(this.$t('message.ydcg'))
            this.showReserve = false
            this.members = ''
            if (e === 1) {
              siteReserve({ param: { siteId: this.siteIds[0] }}).then(res => {
                this.details = res.record
                this.$emit('paymentShow', this.details)
                this.reserveAndOrderId = res.record.id
                this.reserveForm = []
                this.siteIds = []
              })
            } else {
              this.details = {}
              this.reserveForm = []
              this.siteIds = []
              this.$emit('success')
            }
          }
        }).catch(err => {
          console.log(err)
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/styles/variables.scss';
.zbt {
  font-size: 16px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #222222;
  line-height: 16px;
  margin-top: 20px;
  margin-bottom: 15px;
}

.memberFlex {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;

  .search {
    flex: 1;
  }
}

.member {
  width: 100%;
  background: #F7F7F7;
  margin-top: -10px;
  border-radius: 2px;
  padding: 16px;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;

  div {
    font-size: 13px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #222222;
    width: 50%;
    line-height: 1.5;
    margin-top: 5px;

    &:nth-of-type(1),
    &:nth-of-type(2) {
      margin-top: 0;
    }

    span {
      color: $SecondColor;
    }
  }
}

.skCnt {
  margin-top: -10px;
  display: flex;
  margin-bottom: 20px;
}

.bzbt {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #222222;
  line-height: 14px;
  margin-bottom: 15px;
}

.dialog-footer {
  position: relative;

  .reserve-money {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #222222;
    position: absolute;
    left: 0;

    b {
      color: $SecondColor;
      font-size: 20px;
      margin-right: 4px;
    }
  }
}
</style>
